<template>
  <div class="wrap-box ">
    <div class="head-box h-480" :style="{background: `url(${getAssetsImages('bg-img')}) no-repeat`, 'background-size': '100%'}">
    </div>
    <div class="content-box padlr320">
        <div class="head-tit pad-t40 pad-b20 ">企业创新发展一站式服务平台</div>
        <div class="tit-tips">精准匹配全国创新政策，让创新研发更轻松</div>
        <div class="tabs-box flex mar-t30">
            <div 
                class="tabs-li flex-a" 
                v-for="(item, index) in tabsList"
                :key="index"
                :class="{'selectTabs': index === tabsCurrent}"
            >
                <div class="tabs-li-txt">{{ item.name }}</div>
                <div class="tabs-line marlr10" v-if="index + 1 < tabsList.length"></div>
            </div>
        </div>
        <div class="search-box flex-a mar-t20">
            <div class="search-ipt flex-a pad-l15">
                <div class="search-l w-70 flex">
                    <el-dropdown>
                        <span class="flex-a search-txt">
                            <span class="mar-r5">中国</span>
                            <el-icon>
                                <caret-bottom />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>中国</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div class="search-line mar-l10 mar-r20"></div>
                <div class="search-icon">
                    <el-image 
                        style="width: 20px; height: 20px" 
                        :src="getAssetsImages('search-icon')" 
                    />
                </div>
                <el-input
                    v-model="searchKey"
                    style="height: 64px; width: 90%;"
                    placeholder="搜索创新服务名称"
                >
                </el-input>
            </div>
            <div class="search-btn">
                免费查询能否登记
            </div>
            <div class="search-service-btn w-160 h-64 mar-l20 flex-center">
                <el-image 
                    style="width: 38px; height: 38px" 
                    :src="getAssetsImages('service-icon')" 
                />
                <span class="mar-l10">咨询客服</span>
            </div>
        </div>
        <div class="card-box flex flex-wrap mar-t60">
            <div 
                class="card-li  padlr20 padtb20" 
                v-for="(item, index) in cardList"
                :key="index"
                :style="{background: index === cardIndex ? `url(${getAssetsImages('card-bg')}) no-repeat` : '' , 'background-size': '100% 100%'}"
            >
                <div class="card-tit flex-a ju-bt">
                    <div class="flex-a">
                        <span class="tit-txt">商标查询</span>
                        <span class="tit-hot mar-l7">Hot</span>
                    </div>
                    <el-image 
                        style="width: 30px; height: 30px" 
                        :src="getAssetsImages('arrows-icon')" 
                    />
                </div>
                <div class="card-tips mar-t10">
                    保护企业品牌资产，提升企业品牌影响力
                </div>
                <div class="card-price mar-t20">
                    <span class="price-unit">￥</span>
                    <span class="price-num">2500.00</span>
                    <span class="price-label">/件起</span>
                </div>
            </div>
        </div>
        <div class="block-box mar-t60">
            <div class="block-tit ">
                知产宝竭诚为您提供服务
            </div>
            <div 
                class="block-li flex mar-t20" 
                v-for="(liItem, liIndex) in serviceList"
                :key="liIndex"
                
            >
                <div 
                    class="li-l-card padlr20 padtb30"
                    :style="{background: `url(${liItem.img}) no-repeat`, 'background-size': '100%'}"
                >
                    <div class="l-card-tit">{{  liItem.title  }}</div>
                    <div class="l-card-info-txt mar-t20">{{ liItem.describe }}</div>
                </div>

                <div class="li-r-item pad-l20 h-340 flex flex-wrap ju-bt">
                    <div 
                        class="item-li pad18" 
                        v-for="(item, index) in liItem.children"
                        :key="index"
                        :class="{'mar-t15': index > 1}"
                        :style="{
                            background: index === 1 ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                            'background-size': '100%'
                        }"
                        @click="onItem(item)"
                    >
                        <div class="item-li-top flex-a ">
                             <el-image 
                                style="width: 88px; height: 88px" 
                                :src="item.img" 
                            />
                            <div class="top-info pad-l10">
                                <div class="top-info-tit">{{ item.title }}</div>
                                <div class="top-info-tips mar-t10">{{ item.describe }}</div>
                                <div class="top-info-tag flex mar-t12">
                                    <div 
                                        class="tag-li mar-r10 padlr10" 
                                        v-for="(tagItem, tagIndex) in item.keyword" 
                                        :key="tagIndex"
                                    >
                                        {{ tagItem }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex item-detail-btn flex-a flex-j-end">
                            <span>了解详情</span>
                             <el-image 
                                style="width: 14px; height: 14px" 
                                :src="getAssetsImages('arrows-icon2')" 
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mar-t60">
        <find-out-details></find-out-details>
    </div>
  </div>
</template>

<script setup>
import findOutDetails from "@/components/findOutDetails/index.vue"
// 服务商城
import { ref, reactive, } from "vue"
import { useRouter } from "vue-router"
import userApi from "@/api/modules/user.js"
import serviceApi from "@/api/modules/trademarkService.js"
const getUserInfo = () => { 
   return userApi.userInfo().then(res => { 
        console.log(res, "---info");
    })
}
const getServiceType = () => { 
    return serviceApi.serviceType({
        pid: 0
    }).then(res => { 
        serviceList.value = res.data
    })
}

const router = useRouter();
let tabsList = ref([
    {
        name: "查专利"
    },
    {
        name: "查商标"
    },
    {
        name: "查版权"
    },
    {
        name: "查政策"
    },
])
let tabsCurrent = ref(0)
let searchKey = ref("")
let cardList = ref([1,1,1,1,1,1])
let cardIndex = ref(0)
const routerArr = [
    {
        key: "商标服务",
        path: "/trademarkService/index"
    },
    {
        key: "专利服务",
        path: "/patentService/index"
    },
    {
        key: "版权服务",
        path: "/copyrightService/index"
    },
    {
        key: "创新服务",
        path: "/innovativeService/index"
    },
    {
        key: "工商服务",
        path: "/businessService/index"
    },
    {
        key: "财税服务",
        path: "/fiscalTaxationService/index"
    },
    {
        key: "资质代办",
        path: "/qualificationService/index"
    },
    {
        key: "股权设计",
        path: "/stockRightsService/index"
    },
]
const onItem = eve => { 
    routerArr.forEach(item => { 
        if (item.key == eve.title) { 
            toPath(item.path, eve.id)
        }
    })
}
let serviceList = ref([])

const toPath = (url, id) => {
    if (!url) return
    if (id) { 
        router.push({
            path: url,
            query: {
                id
            }
        });
    } else {
        router.push(url);
    }
};
getUserInfo();

getServiceType();

const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>
<style lang="scss" scoped>
:deep(.search-txt:focus) {
  outline: none;
}
:deep(.el-input-group__prepend)  {
    background: #fff ;
}
:deep(.el-input__wrapper) {
    box-shadow: none;
    flex-grow: 0;
    background: transparent ;
    width: 100%;
}
.wrap-box {
    background: #f4f6fa;
}

.content-box {
    position: relative;
    .block-box {
        .block-tit {
            font-size: 28px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: center;
            color: #202020;
        }
        .block-li {
            .li-l-card {
                width: 280px;
                height: 340px;
                border: 2px solid #ffffff;
                border-radius: 4px;
                box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                .l-card-tit {
                    font-size: 24px;
                    font-family: PingFang SC, PingFang SC-Semibold;
                    font-weight: Semibold;
                    text-align: left;
                    color: #ffffff;
                }
                .l-card-info-txt {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #ffffff;
                }
            }
            .li-r-item {
                width: calc(100% - 280px);
                .item-li {
                    width: 49%;
                    height: 160px;
                    background: linear-gradient(180deg,#f0f3f7, #ffffff);
                    border: 2px solid #ffffff;
                    border-radius: 4px;
                    box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                    .item-li-top {
                        .top-info {
                            .top-info-tit {
                                font-size: 16px;
                                font-family: PingFang SC, PingFang SC-Medium;
                                font-weight: Medium;
                                text-align: left;
                                color: #202020;
                            }
                            .top-info-tips {
                                font-size: 14px;
                                font-family: PingFang SC, PingFang SC-Regular;
                                font-weight: Regular;
                                text-align: left;
                                color: #575966;
                            }
                            .top-info-tag {
                                .tag-li {
                                    height: 20px;
                                    background: rgba(0,82,217, .1);
                                    border-radius: 2px;
                                    font-size: 12px;
                                    font-family: PingFang SC, PingFang SC-Regular;
                                    font-weight: Regular;
                                    text-align: left;
                                    color: #0052d9;
                                    line-height: 20px;
                                    text-align: center;
                                }
                            }
                        }
                    }
                    .item-detail-btn {
                        font-size: 14px;
                        font-family: PingFang TC, PingFang TC-Regular;
                        font-weight: Regular;
                        text-align: left;
                        color: #0052d9;
                    }
                }

            }
        }
    }
    .card-box {
        background: linear-gradient(180deg,#eef4fd, #ffffff);
        border: 2px solid #ffffff;
        border-radius: 4px;
        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
        .card-li {
            width: 33.33%;
            border-radius: 0px 0px 0px 4px;
            .card-tit {
                .tit-txt {
                    font-size: 16px;
                    font-family: PingFang SC, PingFang SC-Semibold;
                    font-weight: bold;
                    text-align: left;
                    color: #181818;
                }
                .tit-hot {
                    width: 30px;
                    height: 16px;
                    background: #ff4d00;
                    border-radius: 6px 6px 6px 2px;
                    font-size: 12px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: bold;
                    text-align: center;
                    color: #ffffff;
                    line-height: 17px;
                }
            }
            .card-tips {
                font-size: 14px;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: Regular;
                text-align: left;
                color: #575966;
            }
            .card-price {
                .price-unit,
                .price-num {
                    color: #ff4600;
                }  
                .price-num {
                    font-size: 28px;
                    font-family: PingFang SC, PingFang SC-Semibold;
                    font-weight: Semibold;
                    text-align: left;
                }
                .price-label {
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Regular;
                    font-weight: Regular;
                    text-align: left;
                    color: #181818;
                }
            }
        }
    }
    .search-box {
        .search-service-btn {
            background: linear-gradient(180deg,#e7f3ff, #ffffff);
            border: 2px solid #ffffff;
            border-radius: 4px;
            text-align: center;
            line-height: 64px;

            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: left;
            color: #202020;
        }
        .search-btn {
            width: 160px;
            height: 64px;
            background: #0052d9;
            border-radius: 0px 4px 4px 0px;
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            text-align: left;
            color: #ffffff;
            line-height: 64px;
            text-align: center;
        }
        .search-ipt {
            width: 80%;
            height: 64px;
            background: #ffffff;
            border: 1px solid #1752d9;
            border-radius: 4px 0px 0px 4px;
            .search-line {
                width: 1px;
                height: 29px;
                background-color: #e5e8eb;
            }
            .search-l {
                .search-txt {
                    font-size: 16px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: Medium;
                    text-align: left;
                    color: #222426;
                }
            }

        }
    }
    .tabs-box {
        .tabs-li {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #202020;
        }
        .selectTabs {
            color: #0052d9;
        }
        .tabs-line {
            width: 1px;
            height: 14px;
            background: #202020;
        }
    }
    .tit-tips {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #575966;
    }
     .head-tit {
        font-size: 40px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: center;
        color: #202020;
    }
}
.head-box {
    width: 100%;
    position: absolute;

}

</style>